<!DOCTYPE html>
<html lang="Zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">

        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">HPTT学院</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#home">首页</a>
                    </li>
                    <li>
                        <a href="#bbs">论坛</a>
                    </li>
                    <li>
                        <a href="#web">前端开发</a>
                    </li>
                    <li>
                        <a href="#new">最新课程</a>
                    </li>
                    <li>
                        <a href="#app">移动app</a>
                    </li>
                    <li>
                        <a href="#about">联系我们</a>
                    </li>
                </ul>
            </div>

        </div>
    </nav>

    <section id="home">
        <div class="lvjing">
            <div class="container">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1 text-center">
                        <h1> bootstrap实战课程等你来战!</h1>
                        <p>本套课程适用于:1.WEB开发人员；2.网站维护人员、管理人员</p>
                        <p>培训技能的目标:使用bootstrap框架快速构建响应式网页，颠覆传统WEB前端!</p>
                        <img class="img img-responsive wow flipInX" src="./img/php.jpg" alt="">
                    </div>

                </div>
            </div>
        </div>
    </section>

    <section id="bbs">
        <div class="container">
            <div class="row">
                <div class="col-md-4 text-center">
                    <img src="./img/a.png" alt="">
                    <h3>IOS开发</h3>
                    <p>Android开发技术交流、问题求助、实战案例分享</p>
                </div>
                <div class="col-md-4 text-center">
                    <img src="./img/i.png" alt="">
                    <h3>Android开发</h3>
                    <p>Android开发技术交流、问题求助、实战案例分享</p>
                </div>
                <div class="col-md-4 text-center">
                    <img src="./img/b.png" alt="">
                    <h3>嵌入式底层开发</h3>
                    <p>Android开发技术交流、问题求助、实战案例分享</p>
                </div>
            </div>
        </div>
    </section>
    <section id="web">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h1>HTML5前端开发</h1>
                    <p>一线资深前端开发工程师倾情打造!助你完成普通程序员到优秀工程师的华丽升级！</p>
                    <p> <span class="glyphicon glyphicon-grain"></span> 使用HTML5与CSS3技术轻松实现设备自适应展示。</p>
                    <p> <span class="glyphicon glyphicon-grain"></span> 清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>
                </div>
                <div class="col-md-6"><img src="./img/html5.jpg" alt=""></div>
            </div>
        </div>
    </section>
    <section id="bs">
        <div class="container">
            <div class="row">
                <div class="col-md-6"><img src="./img/Bootstrap.jpg" alt=""></div>
                <div class="col-md-6">
                    <h1>bootstrap</h1>
                    <p>一线资深前端开发工程师倾情打造!助你完成普通程序员到优秀工程师的华丽升级！</p>
                    <p> <span class="glyphicon glyphicon-grain"></span> 使用HTML5与CSS3技术轻松实现设备自适应展示。</p>
                    <p> <span class="glyphicon glyphicon-grain"></span> 清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>
                </div>

            </div>
        </div>
    </section>
    <section id="new">
        <div class="container">
            <h2 class="text-center">最新课程</h2>
            <div class="row">
                <div class="col-md-3 col-xs-6">
                    <div class="course">
                        <img class="img img-responsive" src="./img/swift.jpg" alt="">
                        <button class="btn btn-default">加入学习</button>
                    </div>


                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="course">
                        <img class="img img-responsive" src="./img/swift.jpg" alt="">
                        <button class="btn btn-default">加入学习</button>
                    </div>


                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="course">
                        <img class="img img-responsive" src="./img/swift.jpg" alt="">
                        <button class="btn btn-default">加入学习</button>
                    </div>


                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="course">
                        <img class="img img-responsive" src="./img/swift.jpg" alt="">
                        <button class="btn btn-default">加入学习</button>
                    </div>


                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="course">
                        <img class="img img-responsive" src="./img/swift.jpg" alt="">
                        <button class="btn btn-default">加入学习</button>
                    </div>


                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="course">
                        <img class="img img-responsive" src="./img/swift.jpg" alt="">
                        <button class="btn btn-default">加入学习</button>
                    </div>


                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="course">
                        <img class="img img-responsive" src="./img/swift.jpg" alt="">
                        <button class="btn btn-default">加入学习</button>
                    </div>


                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="course">
                        <img class="img img-responsive" src="./img/swift.jpg" alt="">
                        <button class="btn btn-default">加入学习</button>
                    </div>


                </div>
            </div>
        </div>
    </section>
    <seciton id="app">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h2>HPIT学院移动APP下载</h2>
                    <p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
                <P><button class="btn btn-default"><span class="glyphicon glyphicon-download-alt"></span>iphone版</button>
                    <button class="btn btn-default"><span class="glyphicon glyphicon-download-alt"></span>Android版</button>
                </P>
                <p>
            </div>
                <div class="col-md-6"><img src="./img/app-banner.jpg" class="img img-responsive" alt=""></div>
            </div>
        </div>
    </seciton>
    <section id="about">
   <div class="lvjing">
       <div class="container">
           <div class="row">
               <div class="col-md-6">
                   <h2><span class="glyphicon glyphicon-send"></span>联系我们</h2>
                   <p>HPIT学院是河南厚溥教育有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度！</p>
                   <p><span class="glyphicon glyphicon-home"></span> 地址：河南省郑州市经开区中兴产业园51号</p>    
                   <p><span class="glyphicon glyphicon-phone-alt"></span> 电话：0371-86567913</p>    
                   <p><span class="glyphicon glyphicon-envelope"></span> 邮箱：edu@hpit.com</p>    
               </div>
               <div class="col-md-6">
                   
                   <form action="" method="POST" class="form-horizontal" role="form">
                           <div class="form-group">
                              
                  
                              
                                  <div class="col-xs-6">
                                    <input type="text" name="" id="" class="form-control">
                                  </div>
                                  <div class="col-xs-6">
                                    <input type="text" name="" id="" class="form-control">
                                  </div>
                             
                                  
                            
                              
                           </div>
                           <div class="form-group">
                               <div class="col-xs-12">
                              <input type="text" name="" id="" class="form-control">
                            </div>
                           </div>
                           <div class="form-group">
                            <div class="col-xs-12">
                              <textarea name="" id=""  class="form-control"  cols="30" rows="3"></textarea>
                            </div>
                           </div>
                   
                           
                   
                           <div class="form-group">
                               <div class="col-xs-8">
                                   <button type="submit" class="btn btn-primary form-control">提交</button>
                               </div>
                           </div>
                   </form>
                   
               </div>
           </div>
       </div>
   </div>
    </section>
    <footer>
        <p class="text-center">asdfasfdasfsagsasg</p>   
    </footer>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="/js/jquery.singlePageNav.min.js"></script>
    <script src="./js/wow.js"></script>
    <script>
        $(function(){
            new WOW().init();
            $('.nav').singlePageNav({
            offset:70
        });
        })
    </script>
</body>

</html>